<template>
  <div ref="map3" id="map3">
    <!-- 图层 -->
    <div id="alllayers" position="top-left" style="display: block; overflow: auto" v-if="isShow === '1'">
      <a-tree
        v-model="checkedKeys"
        checkable
        :default-expand-all="true"
        :auto-expand-parent="autoExpandParent"
        :selected-keys="selectedKeys"
        :tree-data="treeData"
        @expand="onExpand"
        @select="onSelect"
        @check="onCheck"
      />
    </div>
    <!-- 显示经纬度、高度 -->
    <div>
      <div class="mywindow" id="windowbox" position="bottom-left"></div>
    </div>
    <!-- 飞行 -->
    <div id="toolbar" class="fly" v-if="isShow === '3'" position="top-left">
      <a type="button" class="button" @click="startFly">开始</a>
      <a type="button" class="button" @click="pauseFly">暂停</a>
      <a type="button" class="button" @click="stopFly">停止</a>
      <div style="width: 150px">
        <a type="button" class="button" @click="addPlace">添加站点</a>
        <a type="button" class="button" @click="cleanPlace">清除站点</a>
      </div>
      <div class="checkbox">
        <label> <input type="checkbox" id="show-line" checked @change="changeLine" /> 显示站点和路线 </label>
      </div>
    </div>
    <!-- 漫游 -->
    <div id="manyou" class="fly" v-if="isShow === '5'" position="top-left">
      <div style="width: 160px">
        <a type="button" class="button" @click="freeden">开启漫游</a>
        <a type="button" @click="quit" class="button">退出漫游</a>
        <a type="button" @click="creatmyman" class="button" v-if="hideCar === 1">第三人称漫游</a>
        <a type="button" @click="controlMan" class="button" v-else-if="hideCar === 2">确定</a>

        <div>
          提示：镜头通过WASD控制前后左右的方向，QE控制升降，鼠标单击后滑动可控制视角；
          <br />
          小人通过上下左右键控制
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <div id="bubble" class="bubble" v-show="showBuble">
      <div id="tools" style="text-align: right">
        <span style=" padding: 5px; position: absolute; left: 10px; top: 4px">对象属性</span>
        <span @click="closebubble" title="关闭" id="close" style="color: darkgrey; padding: 5px">
          <a-icon type="close" />
        </span>
      </div>
      <div style="overflow-y: scroll; height: 150px;padding:0 4px" id="tableContainer">
        <table id="tab">
        </table>
      </div>
    </div>
    <!-- 车位弹窗 -->
    <div style="width: 70px; height: 40px; position: absolute;z-index: 999;right:0" id="pbubble"></div>
    <!-- <div class="prism-player" id="player-con" ></div> -->
    <video id="videoElement" style="display:none"></video>
    <!-- style="display:none" -->
    <!-- 锚点 -->
    <div class="myanchor" >
      <a @click="changeView(99)">双创</a>
      <a @click="changeView(6)">6F</a>
      <a @click="changeView(5)">5F</a>
      <a @click="changeView(4)">4F</a>
      <a @click="changeView(3)">3F</a>
      <a @click="changeView(2)">2F</a>
      <a @click="changeView(1)">1F</a>
    </div>
    <small-map id="eye" :transPosition='transPosition'>
      
    </small-map>
    <sm-viewer>
      <!-- 量测 -->
      <sm3d-measure></sm3d-measure>
      <!-- 阴影分析 -->
      <sm3d-shadowquery></sm3d-shadowquery>
      <!-- 裁剪cross -->
      <sm3d-clip-cross></sm3d-clip-cross>
    </sm-viewer>
  </div>
</template>

<script>
import '@supermap/vue-iclient3d-webgl/dist/styles/vue-iclient3d-webgl.min.css'
import screenfull from 'screenfull'
import Axios from 'axios'
import smallMap from '@/components/mycomponents/smallMap1.vue'

var tcObj = {}
var myChildren = []
var tileset

export default {
  name: 'show3D',
  data() {
    return {
      transPosition:[],
      mydata:{
        "camera":[
            {
                "position":[109.60905112102611,18.3094688744338,30],
                "heading": 180.0, 
                "pitch": -20.0

            },
            {
                "position":[109.60915176413653,18.309182500043867,30],
                "heading": -145.0, 
                "pitch": -25.0
            },
            {
                "position":[109.60850996461166,18.308475736803338,28],
                "heading": 90.0, 
                "pitch": -20.0

            },
            {
                "position":[109.6089931786813,18.30890,38],
                "heading": 145.0, 
                "pitch": -30.0

            },
            {
              "position":[109.60912404446961,18.308891617225164,38],
              "heading":-130,
              "pitch":-40,
            }
          ],
        "park":[
            {
                "positions":[109.60852134187965, 18.308801823761748, 23,
                    109.60853531372378, 18.308779872565584, 23,
                    109.60908175868629, 18.309172616709482, 23,
                    109.60906349313419, 18.309203644399854, 23,
                    109.60852134187965, 18.308801823761748, 23,
                ]
            },
            {
                "positions":[109.60859510492969,18.308754522605856,23,
                109.60862490863165,18.308722042304442,23,
                109.6086958841851,18.30876920962468,23,
                109.60866490830057,18.30880436670906,23,
                109.60859510492969,18.308754522605856,23,
                ]
            },
            {
                "positions":[109.60873073338811,18.308851993765025,23,
                109.60875960582652,18.30881685759399,23,
                109.60886040779022,18.308891200747006,23,
                109.6088318981855,18.308924118603652,23,
                109.60873073338811,18.308851993765025,23,    
                ]
            },
            {
                "positions":[109.60877860795954,18.308396666576517,23,
                109.60881395190864,18.30835309273222,23,
                109.60893569882677,18.308432592054178,23,
                109.60889883139752,18.30847925901375,23,
                109.60877860795954,18.308396666576517,23,
              ]
            }

        ],
        "car":[
          {
            'position':[109.60895590171017,18.309100735499356,21.187263121318242],
          },
          {
            'position':[109.60869075964413,18.308907925023576,21.192768590320245],
          },
          {
            'position':[109.60877834138957,18.308854428780894,21.213085823340734],
          },
          {
            'position':[109.60866750327854,18.30877601328468,21.221578985891053],
          },
          {
            'position':[109.60864268682344,18.308760690576342,21.230244836416116],
          },
          {
            'position':[109.60862052252203,18.308745871785824,21.23375356831506],
          },
        ]
      },
      //自动展开父节点--
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      mylist: undefined,
      treeData: [
        {
          title: '图层',
          key: '图层',
          children: [],
        },
      ],
      isShow: '',
      choosedname: '',
      allStops: [],
      toStartFly: '',
      drowallStops: [],
      line_bool: true,
      index: undefined,
      copyIndex: undefined,
      down: undefined,
      up: undefined,
      hideCar: 1,
      showBuble: false,
      pickedPositon:undefined,
      showVideo:false,
      dataName:'',
      videoFlag:true
    }
  },
  components:{
    smallMap
  },
  methods: {
    changeView(num){
      switch(num){
        case 99:{
        
          window.earth.forEach((res)=>{
            res.visible=true
          })
          break;
        }
        case 6:{
          window.earth.forEach((res)=>{
            if(res.name=='炮楼_T2000经纬度_adjust@主要建筑' ||res.name=='楼顶实体_T2000经纬度_adjust@主要建筑'){
              res.visible=false
            }else{
              res.visible=true
            }
          })
          break;
        }
        case 5:{
          window.earth.forEach((res)=>{
            if(res.name=='炮楼_T2000经纬度_adjust@主要建筑' ||res.name=='楼顶实体_T2000经纬度_adjust@主要建筑'||res.name=='T6层_T2000经纬度_adjust@主要建筑'||res.name=='楼梯间_T2000经纬度_adjust@主要建筑'){
              res.visible=false
            }else{
              res.visible=true
            }
          })
          break;
        }
        case 4:{
          window.earth.forEach((res)=>{
            if(res.name=='炮楼_T2000经纬度_adjust@主要建筑' ||res.name=='楼顶实体_T2000经纬度_adjust@主要建筑'||res.name=='T6层_T2000经纬度_adjust@主要建筑'||res.name=='楼梯间_T2000经纬度_adjust@主要建筑'
            ||res.name=='T5层_T2000经纬度_adjust@主要建筑'){
              res.visible=false
            }else{
              res.visible=true
            }
          })
          break;
        }
        case 3:{
          window.earth.forEach((res)=>{
            if(res.name=='炮楼_T2000经纬度_adjust@主要建筑' ||res.name=='楼顶实体_T2000经纬度_adjust@主要建筑'||res.name=='T6层_T2000经纬度_adjust@主要建筑'||res.name=='楼梯间_T2000经纬度_adjust@主要建筑'
            ||res.name=='T5层_T2000经纬度_adjust@主要建筑'||res.name=='T4层_T2000经纬度_adjust@主要建筑'){
              res.visible=false
            }else{
              res.visible=true
            }
          })
          break;
        }
        case 2:{
          window.earth.forEach((res)=>{
            if(res.name=='炮楼_T2000经纬度_adjust@主要建筑' ||res.name=='楼顶实体_T2000经纬度_adjust@主要建筑'||res.name=='T6层_T2000经纬度_adjust@主要建筑'||res.name=='楼梯间_T2000经纬度_adjust@主要建筑'
            ||res.name=='T5层_T2000经纬度_adjust@主要建筑'||res.name=='T4层_T2000经纬度_adjust@主要建筑'||res.name=='T3层_T2000经纬度_adjust@主要建筑'){
              res.visible=false
            }else{
              res.visible=true
            }
          })
          break;
        }
        case 1:{
          window.earth.forEach((res)=>{
            if(res.name=='炮楼_T2000经纬度_adjust@主要建筑' ||res.name=='楼顶实体_T2000经纬度_adjust@主要建筑'||res.name=='T6层_T2000经纬度_adjust@主要建筑'||res.name=='楼梯间_T2000经纬度_adjust@主要建筑'
            ||res.name=='T5层_T2000经纬度_adjust@主要建筑'||res.name=='T4层_T2000经纬度_adjust@主要建筑'||res.name=='T3层_T2000经纬度_adjust@主要建筑'||res.name=='T2层_T2000经纬度_adjust@主要建筑'){
              res.visible=false
            }else{
              res.visible=true
            }
          })
          break;
        }

      }
    },
    // 查看监控
    showCamera(){
      if(viewer.entities.getById('sxt0')){
        viewer.camera.flyTo({
          destination:new Cesium.Cartesian3.fromDegrees(109.60807,18.30900,120),
          orientation:{
            heading:  Cesium.Math.toRadians(110.0), 
            pitch: Cesium.Math.toRadians(-45.0), 
            roll: 0.0,
          }
        })
      }else{
          viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(109.60910717298083,18.309292479804235,24),
            billboard: {
              image:'/static/img/摄像头1.png',
              // scale:0.5,
              width: 50,
              height: 74,
              disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
            name: 'sxt0',
            id: 'sxt0',
        })
        viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(109.60910168985923,18.30904692939374,25),
            billboard: {
              image:'/static/img/摄像头1.png',
              width: 50,
              height: 74,
              disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
            name: 'sxt1',
            id: 'sxt1',
        })
        viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(109.60868158615855,18.30850604347864,25),
            billboard: {
              image:'/static/img/摄像头1.png',
              width: 50,
              height: 74,
              disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
            name: 'sxt2',
            id: 'sxt2',
        })
        viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(109.60911114392042,18.30881157618479,30.6),
            billboard: {
              image:'/static/img/摄像头1.png',
              width: 50,
              height: 74,
              disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
            name: 'sxt3',
            id: 'sxt3',
        })
        viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(109.60902132170906,18.3088173772822,30.55),
            billboard: {
              image:'/static/img/摄像头1.png',
              width: 50,
              height: 74,
              disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
            name: 'sxt4',
            id: 'sxt4',
        })
        
        viewer.camera.flyTo({
          destination:new Cesium.Cartesian3.fromDegrees(109.60807,18.30900,120),
          orientation:{
            heading:  Cesium.Math.toRadians(110.0), 
            pitch: Cesium.Math.toRadians(-45.0), 
            roll: 0.0,
          }
        })
     }
    },
    // 添加墙（车位
    addwall(){
      if(viewer.entities.getById('p0')){
        viewer.camera.flyTo({
            destination:Cesium.Cartesian3.fromDegrees(109.6080,18.308625,90),
            orientation:{
              heading:  Cesium.Math.toRadians(90.0), 
              pitch: Cesium.Math.toRadians(-40.0), 
              roll: 0.0,
            },
            duration:3
        })
        return
      }else{
          for(var i = 0;i<this.mydata.park.length;i++){
            let alp = 1;
            let num = 0;
            let arrnum =0.05;
            var minimumHeights=[21,21,21,21,21]
            var maximumHeights=[23,23,23,23,23]
            var tempmaximumHeights=[21,21,21,21,21]
            var positions = Cesium.Cartesian3.fromDegreesArrayHeights(this.mydata.park[i].positions)
            //绘制墙
            var mywall = viewer.entities.add({
                id:"wall"+i,
                name: "wall"+i,
                wall:{
                    positions:positions,
                    // minimumHeights:
                    // maximumHeights:[23,23,23,23,23],
                    minimumHeights:[21,21,21,21,21],
                    maximumHeights:new Cesium.CallbackProperty(function () {
                      // console.log(tempmaximumHeights)
                      try{
                          for (let i = 0; i < minimumHeights.length; i++) {
                          tempmaximumHeights[i] +=  0.005;
                          if (tempmaximumHeights[i] > maximumHeights[i]) {
                              tempmaximumHeights[i] =minimumHeights[i];
                          }
                      }
                      return tempmaximumHeights;
                      }
                      catch(err){
                        console.log(err)
                      }
                        
                    },false),
                    material: new Cesium.ImageMaterialProperty({
                        // image:"/static/img/墙.png",
                        image:"/static/img/荧光绿.png",
                        transparent:true,
                        color: Cesium.Color.WHITE.withAlpha(1)
                            //entity的颜色透明 并不影响材质，并且 entity也会透明
                        },false)
                    // material: new Cesium.ImageMaterialProperty({
                    //     // image:"/static/img/墙.png",
                    //     image:"/static/img/薄荷绿.png",
                    //     transparent:true,
                    //     color:new Cesium.CallbackProperty(function () {
                    //         if ((num % 2) === 0){
                    //             alp -=0.01;
                    //         }else {
                    //             alp +=0.01;
                    //         }

                    //         if (alp <= 0.3){
                    //             num++;
                    //         }else if (alp >= 1){
                    //             num++;
                    //         }
                    //         return  Cesium.Color.WHITE.withAlpha(alp)
                    //         //entity的颜色透明 并不影响材质，并且 entity也会透明
                    //     },false)
                    // })
                }
            });
            var p = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(this.mydata.park[i].positions[0],this.mydata.park[i].positions[1],this.mydata.park[i].positions[2]),
            billboard: {
              image:'/static/img/停车1.png',
              width: 50,
              height: 74
            },
            name: 'p'+i,
            id: 'p'+i,
          })
          }
          // 塞车子
          this.mydata.car.forEach((res,index)=>{
            viewer.entities.add({
              id: 'car'+index,
              position: new Cesium.Cartesian3.fromDegrees(res.position[0],res.position[1],res.position[2]),
              model: {
                uri: '/static/model/car/taxi.glb',
              },
            })
          })
          
          // viewer.zoomTo(mywall);
          viewer.camera.flyTo({
            destination:new Cesium.Cartesian3.fromDegrees(109.6080,18.308625,90),
            orientation:{
              heading:  Cesium.Math.toRadians(90.0), 
              pitch: Cesium.Math.toRadians(-40.0), 
              roll: 0.0,
            },
            duration:3
        })
      }
        
    },
    // 关闭弹窗
    closebubble() {
      this.showBuble = false
    },
    // 创建弹窗
    createBubble(obj) {
      // console.log(feature)
      // this.showBuble = true
      if(this.pickedPositon.length!=0){
        console.log(obj)
        // debugger

          this.showBuble = true
          var dataName = this.dataName
          var id = obj.SMID

          var position = this.pickedPositon
          var table = document.getElementById("tab");
          for (var i = table.rows.length-1;i > -1;i--){
                    table.deleteRow(i);
                }
          for(var index in obj){
                    var newRow = table.insertRow();
                    var cell1 = newRow.insertCell();
                    var cell2 = newRow.insertCell();
                    cell1.innerHTML = index;
                    cell2.innerHTML = obj[index];
                }

          //弹窗随屏幕移动而移动
          var infoboxContainer = document.getElementById('bubble')
          viewer.scene.postRender.addEventListener(function () {
            // 每一帧都去计算气泡的正确位置
            if (position) {
              var canvasHeight = scene.canvas.height
              var windowPosition = new Cesium.Cartesian2()
              Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position, windowPosition)
              infoboxContainer.style.bottom = canvasHeight - windowPosition.y + 45 + 'px'
              infoboxContainer.style.left = windowPosition.x - 70 + 'px'
              infoboxContainer.style.visibility = 'visible'
            }
          })
      }
      
    },
    // 退出漫游
    quit() {
      viewer.trackedEntity = ''
      scene.screenSpaceCameraController.enableRotate = true
      scene.screenSpaceCameraController.enableTranslate = true
      scene.screenSpaceCameraController.enableZoom = true
      scene.screenSpaceCameraController.enableTilt = true
      scene.screenSpaceCameraController.enableLook = true
      viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN)
      viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
      viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
      document.removeEventListener('keydown', this.down, false)
      document.removeEventListener('keyup', this.up, false)
    },
    // 自由镜头or漫游
    freeden() {
      // this.e()
      var ellipsoid = viewer.scene.globe.ellipsoid

      scene.screenSpaceCameraController.enableRotate = false
      scene.screenSpaceCameraController.enableTranslate = false
      scene.screenSpaceCameraController.enableZoom = false
      scene.screenSpaceCameraController.enableTilt = false
      scene.screenSpaceCameraController.enableLook = false

      var startMousePosition
      var mousePosition
      var flags = {
        looking: false,
        moveForward: false,
        moveBackward: false,
        moveUp: false,
        moveDown: false,
        moveLeft: false,
        moveRight: false,
      }

      viewer.screenSpaceEventHandler.setInputAction(function (movement) {
        flags.looking = true
        mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position)
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN)

      viewer.screenSpaceEventHandler.setInputAction(function (movement) {
        mousePosition = movement.endPosition
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

      viewer.screenSpaceEventHandler.setInputAction(function (position) {
        flags.looking = false
      }, Cesium.ScreenSpaceEventType.LEFT_UP)

      function getFlagForKeyCode(keyCode) {
        switch (keyCode) {
          case 'W'.charCodeAt(0):
            return 'moveForward'
          case 'S'.charCodeAt(0):
            return 'moveBackward'
          case 'Q'.charCodeAt(0):
            return 'moveUp'
          case 'E'.charCodeAt(0):
            return 'moveDown'
          case 'D'.charCodeAt(0):
            return 'moveRight'
          case 'A'.charCodeAt(0):
            return 'moveLeft'
          default:
            return undefined
        }
      }

      document.addEventListener(
        'keydown',
        (this.down = function (e) {
          var flagName = getFlagForKeyCode(e.keyCode)
          if (typeof flagName !== 'undefined') {
            flags[flagName] = true
          }
        }),
        false
      )

      document.addEventListener(
        'keyup',
        (this.up = (e) => {
          var flagName = getFlagForKeyCode(e.keyCode)
          if (typeof flagName !== 'undefined') {
            flags[flagName] = false
          }
        }),
        false
      )

      viewer.clock.onTick.addEventListener(function (clock) {
        var camera = viewer.camera
        // 镜头旋转
        if (flags.looking) {
          var width = viewer.canvas.clientWidth
          var height = viewer.canvas.clientHeight

          var lookFactor = 0.06
          var x = (mousePosition.x - startMousePosition.x) / width
          var y = -(mousePosition.y - startMousePosition.y) / height

          camera.setView({
            // position:Cesium.Cartesian3.fromDegrees(109.49404611080851,18.2966550140225,12.0),
            orientation: {
              heading: camera.heading + x * lookFactor,
              pitch: camera.pitch + y * lookFactor,
              roll: 0.0,
            },
          })
        }

        // 根据高度来决定镜头移动的速度
        var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height
        var moveRate = cameraHeight / 100.0

        if (flags.moveForward) {
          camera.moveForward(moveRate)
        }
        if (flags.moveBackward) {
          camera.moveBackward(moveRate)
        }
        if (flags.moveUp) {
          camera.moveUp(moveRate)
        }
        if (flags.moveDown) {
          camera.moveDown(moveRate)
        }
        if (flags.moveLeft) {
          camera.moveLeft(moveRate)
        }
        if (flags.moveRight) {
          camera.moveRight(moveRate)
        }
      })
    },
    // 控制人
    creatmyman() {
      this.$notification.open({
        message: `提示`,
        description: '接下来请在地图上选择一个点,然后点击左边的确定按钮',
      })
      this.hideCar = 2
    },
    controlMan() {
      let str = document.getElementById('windowbox').innerHTML.toString().split('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;')
      let newStr = [parseFloat(str[0].substring(3)), parseFloat(str[1].substring(3)), parseFloat(str[2].substring(3))]
      // 旋转角度
      let radian = Cesium.Math.toRadians(2.0)
      // 速度
      let speed = 0.15
      // 速度矢量
      let speedVector = new Cesium.Cartesian3()
      let scene = viewer.scene
      // 起始位置
      let position = Cesium.Cartesian3.fromDegrees(newStr[0], newStr[1], newStr[2])
      // 用于设置小车方向
      let hpRoll = new Cesium.HeadingPitchRoll()
      hpRoll.heading = Cesium.Math.toRadians(90.0)
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll)
      // 小车状态标志
      let flag = {
        moveUp: false,
        moveDown: false,
        moveLeft: false,
        moveRight: false,
      }
      // 添加模型
      let woman = viewer.entities.add({
        id: 'woman',
        position: new Cesium.CallbackProperty(getPositin, false),
        // 根据所提供的速度计算点
        orientation: new Cesium.CallbackProperty(getOrientation, false),
        model: {
          uri: '/static/model/walking/scene.gltf',
          runAnimations: new Cesium.CallbackProperty(getRun, false),
          scale: 0.012,
          // 贴地
          // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
        },
      })

      // 根据键盘按键返回标志
      function setFlagStatus(key, value) {
        switch (key.keyCode) {
          case 37:
            // 左
            flag.moveLeft = value
            break
          case 38:
            // 上
            flag.moveUp = value
            break
          case 39:
            // 右
            flag.moveRight = value
            break
          case 40:
            flag.moveDown = value
            // 下
            break
        }
      }
      // 小车状态，停下时false，开始运动后都是true。
      var run = false
      document.addEventListener('keydown', (e) => {
        setFlagStatus(e, true)
        if (e.which === 40 || e.which === 39 || e.which === 38 || e.which === 37) {
          if (!run) {
            run = true
          }
        }
      })

      document.addEventListener('keyup', (e) => {
        setFlagStatus(e, false)
        if (e.which === 40 || e.which === 39 || e.which === 38 || e.which === 37) {
          if (flag.moveUp | flag.moveDown | flag.moveLeft | flag.moveRight) {
            return
          } else {
            run = false
          }
        }
      })
      var count = 0
      viewer.clock.onTick.addEventListener((clock) => {
        if (flag.moveUp) {
          if (flag.moveLeft) {
            hpRoll.heading -= radian
            count += 2
          }
          if (flag.moveRight) {
            hpRoll.heading += radian
            count -= 2
          }
          moveCar(1)
        } else if (flag.moveDown) {
          if (flag.moveLeft) {
            hpRoll.heading -= radian
            count += 2
          }
          if (flag.moveRight) {
            hpRoll.heading += radian
            count -= 2
          }
          moveCar(-1)
        } else {
          if (flag.moveLeft) {
            hpRoll.heading -= radian
            count += 2
            moveCar(0)
          }
          if (flag.moveRight) {
            hpRoll.heading += radian
            count -= 2
            moveCar(0)
          }
        }
      })
      // 移动小车
      function moveCar(isUP) {
        // 计算速度矩阵
        if (isUP === 1) {
          speedVector = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.UNIT_X, speed, speedVector)
        } else if (isUP === -1) {
          speedVector = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.UNIT_X, -speed, speedVector)
        } else {
          speedVector = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.UNIT_X, 0, speedVector)
        }

        // 根据速度计算出下一个位置的坐标 north south east west
        let fixedFrameTransforms = Cesium.Transforms.localFrameToFixedFrameGenerator('east', 'north')
        let modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
          position,
          hpRoll,
          Cesium.Ellipsoid.WGS84,
          fixedFrameTransforms
        )
        position = Cesium.Matrix4.multiplyByPoint(modelMatrix, speedVector, position)
        //计算镜头设置的位置
        var cartesian3 = new Cesium.Cartesian3(position.x, position.y, position.z)
        var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian3)
        var lng =
          Cesium.Math.toDegrees(cartographic.longitude) -
          0.00001852398509 * 4 * Math.cos(((270 + count) * 2 * Math.PI) / 360)
        var lat =
          Cesium.Math.toDegrees(cartographic.latitude) -
          0.00001852398509 * 4 * Math.sin(((270 + count) * 2 * Math.PI) / 360)
        var alt = cartographic.height + 5
        // // 获取指定经纬度的高程
        // var toH=new Cesium.Cartographic.fromDegrees(lng,lat)
        // // var h = viewer.scene.globe.getHeight(toH)
        // var h2 = viewer.scene.sampleHeight(toH)
        //设置镜头
        viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(lng, lat, alt),
          orientation: {
            // 指向  镜头随小车变化角度
            heading: hpRoll.heading + Cesium.Math.toRadians(90.0),
            // 视角固定
            pitch: Cesium.Math.toRadians(-15.0),
            roll: 0.0,
          },
        })
      }
      function getPositin() {
        return position
      }
      function getOrientation() {
        return Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll)
      }
      function getRun() {
        return run
      }
      this.hideCar = 3
    },
    // 全屏
    screen() {
      screenfull.toggle()
    },
    // 控制站点和路线显示隐藏
    changeLine() {
      viewer.entities.show = !viewer.entities.show
      this.line_bool = !this.line_bool
      this.copyIndex = undefined
    },
    //飞行暂停
    pauseFly() {
      this.copyIndex = this.index
      this.index = this.drowallStops.length + 1
    },
    // 飞行停止
    stopFly() {
      this.index = this.drowallStops.length + 1
      this.copyIndex = undefined
    },
    startFly() {
      this.toStartFly()
    },
    // 添加站点
    addPlace() {
      var Stop = {}
      var position = viewer.scene.camera.position
      //参数传入站点变量
      Stop.heading = viewer.scene.camera.heading
      Stop.pitch = viewer.scene.camera.pitch
      Stop.roll = viewer.scene.camera.roll
      Stop.time = 10
      //传入飞行站点数组
      this.allStops.push(Stop)
      this.$message.success('设置站点成功')
      //显示飞行路线
      var drowStop = {}
      var cartographic = Cesium.Cartographic.fromCartesian(position)
      drowStop.longitude = Cesium.Math.toDegrees(cartographic.longitude)
      drowStop.latitude = Cesium.Math.toDegrees(cartographic.latitude)
      drowStop.height = cartographic.height

      this.drowallStops.push(drowStop)

      var length = this.drowallStops.length
      // 飞行路线和飞行站点
      if (this.line_bool) {
        if (this.drowallStops.length > 1) {
          // 实体路线
          viewer.entities.add({
            id: this.drowallStops.length + 1000,
            name: this.drowallStops.length + 1000,
            polyline: {
              positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                this.drowallStops[length - 2].longitude,
                this.drowallStops[length - 2].latitude,
                this.drowallStops[length - 2].height,
                this.drowallStops[length - 1].longitude,
                this.drowallStops[length - 1].latitude,
                this.drowallStops[length - 1].height,
              ]),
              width: 5,
              material: Cesium.Color.BLUE,
            },
          })
        }
        //站点地标
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(
            this.drowallStops[length - 1].longitude,
            this.drowallStops[length - 1].latitude,
            this.drowallStops[length - 1].height
          ),
          box: {
            dimensions: new Cesium.Cartesian3(0.5, 0.5, 1.0),
            material: Cesium.Color.WHITE,
          },
          name: this.drowallStops.length + 1000000,
          id: this.drowallStops.length + 1000000,
        })
      }

      //如果关闭显示了站点和飞行路线，添加的新站点和飞行路线将先不显示
      if (!this.line_bool) {
        if (this.drowallStops.length > 1) {
          viewer.entities.add({
            id: this.drowallStops.length + 1000,
            name: this.drowallStops.length + 1000,
            show: false,
            polyline: {
              positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                this.drowallStops[length - 2].longitude,
                this.drowallStops[length - 2].latitude,
                this.drowallStops[length - 2].height,
                this.drowallStops[length - 1].longitude,
                this.drowallStops[length - 1].latitude,
                this.drowallStops[length - 1].height,
              ]),
              width: 5,
              material: Cesium.Color.BLUE,
            },
          })
        }
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(
            this.drowallStops[length - 1].longitude,
            this.drowallStops[length - 1].latitude,
            this.drowallStops[length - 1].height
          ),
          box: {
            dimensions: new Cesium.Cartesian3(0.5, 0.5, 1.0),
            material: Cesium.Color.WHITE,
          },
          name: this.drowallStops.length + 1000000,
          id: this.drowallStops.length + 1000000,
          show: false,
        })
      }
    },
    // 清除站点
    cleanPlace() {
      this.allStops = []
      this.drowallStops = []
      viewer.entities._entities._array.forEach((res) => {
        if (res.id >= 1000) {
          viewer.entities.removeById(res.id)
        }
      })
    },
    myunchoosed() {
      window.earth.forEach((res) => {
        res.visible = true
      })
    },
    //展开
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      // this.autoExpandParent = false;
    },
    //选中
    onCheck(checkedKeys, e) {
      this.checkedKeys = checkedKeys
      this.myunchoosed()
      checkedKeys.forEach((res) => {
        window.earth.forEach((res1) => {
          if (res1.name.indexOf(res) > -1) {
            res1.visible = false
          }
        })
      })
    },
    //点击
    onSelect(selectedKeys, info) {
      this.selectedKeys = selectedKeys
    },
  },
  mounted() {
    //隐藏底部logo
    viewer._cesiumWidget._creditContainer.style.display = 'none'
    //显示帧数
    viewer.scene.debugShowFramesPerSecond = true
    // 碰撞检测-好像没有用
    viewer.scene.screenSpaceCameraController.enableCollisionDetection = true
    // viewer.scene.requestRenderMode=true;
    // viewer.homeButton=true

    var promise = viewer.scene.open(window._CONFIG['TestAPP'])

    Cesium.when(promise, (layers) => {
      
      var listlayers = layers
      window.earth = layers
      listlayers.forEach((res, i) => {
        res.selectedColor=Cesium.Color.CYAN;
        // res.selectColorType=Cesium.SelectColorType.SILHOUETTE;
        // res.selectColorType=Cesium.SelectColorType.ALWAYS_SHOW_SILHOUETTE;
        
        var layername = res.name.split('@')
        res.setQueryParameter({
                    url: window._CONFIG['APPdata'],
                    dataSourceName: layername[1],
                    dataSetName: layername[0],
                    keyWord: 'SMID'
                });

        tcObj = {
          title: layername[1],
          key: layername[1],
          children: [],
        }

        // 数组不为空
        if (myChildren.length != 0) {
          // 判断是否重复
          var aa = myChildren.findIndex((item) => item.title === layername[1])
          if (aa == -1) {
            myChildren.push(tcObj)
          }
        } else {
          myChildren.push(tcObj)
        }
      })
      listlayers.forEach((res, i) => {
        var layername1 = res.name.split('@')
        //判断是否存在
        var aa = myChildren.findIndex((item) => item.title === layername1[1])
        tcObj = {
          title: layername1[0],
          key: layername1[0],
          id: res.id,
        }
        myChildren[aa].children.push(tcObj)
      })

         
                       
    })
    this.treeData[0].children = myChildren

    // mapbox底图
    // var layer=new Cesium.MapboxStyleImageryProvider({
    //     url:'https://api.mapbox.com/styles/v1',
    //     username:'huacheng',
    //     styleId: 'cki003jdq212619mvxeucvh01',
    //     accessToken: 'pk.eyJ1IjoiaHVhY2hlbmciLCJhIjoiY2toem5jZGR3MW5hczJybnR1NHRqNGZlOCJ9.prwTs_ZwOpjgesjeGzMa2g',
    //     scaleFactor:true
    // });
    
    
    // viewer.imageryLayers.addImageryProvider(layer);

    // var videoElement = document.getElementById('videoElement');
    // var flvPlayer = flvjs.createPlayer({
    //     type: 'flv',
    //     url: 'https://kk.huachengcehui.top/app/34020000001320000001.flv?auth_key=1608264199-0-0-f0528bd84f374d9716964013d0390d97',
    //     isLive: true,
    //     // autoplay:true
    // });
    // if (flvjs.isSupported()) {
    //     flvPlayer.attachMediaElement(videoElement);
    //     // flvPlayer.load();   
    // }

    //设置鼠标左键单击回调事件
    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas)
    handler.setInputAction(function (e) {
      //获取点击位置笛卡尔坐标
      var position = scene.pickPosition(e.position)
      
      // 选中图层
      let selectlayer = viewer.scene.layers.getSelectedLayer()
      console.log(selectlayer)
      if(selectlayer){
        _this.pickedPositon=position
        _this.dataName = selectlayer.name
      }
      //将笛卡尔坐标转化为经纬度坐标
      var cartographic = Cesium.Cartographic.fromCartesian(position)
      var longitude = Cesium.Math.toDegrees(cartographic.longitude)
      var latitude = Cesium.Math.toDegrees(cartographic.latitude)
      var height = cartographic.height
      if (height < 0) {
        height = 0
      }
      console.log(longitude+','+latitude+','+height)
      // 将坐标写入html
      createDescription(Cesium, [longitude, latitude, height])


      //  选取实体类
      var pointDraged = viewer.scene.pick(e.position);
      //车位的小弹窗
      var el = document.getElementById('pbubble');
      if(pointDraged){
          switch(pointDraged.id.id){
            case 'sxt0':
              viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(_this.mydata.camera[0].position[0],_this.mydata.camera[0].position[1],_this.mydata.camera[0].position[2]),
                orientation: {
                  heading:  Cesium.Math.toRadians(_this.mydata.camera[0].heading), // 方向
                  pitch: Cesium.Math.toRadians(_this.mydata.camera[0].pitch), // 倾斜角度
                  roll: 0.0,
                },
                duration: 2, 
              })

              // 先添加监控画面
              // var player = new Aliplayer({
              //   "id": "player-con",
              //   "source": "https://kk.huachengcehui.top/app/34020000001320000001.flv?auth_key=1608260394-0-0-661e6e8274db9ee61ccce2dc0d8a8001",
              //   "width": "100%",
              //   "height": "500px",
              //   "autoplay": true,
              //   "isLive": true,
              //   "rePlay": false,
              //   "playsinline": true,
              //   "preload": true,
              // //   "enableStashBufferForFlv": true,
              // //   "stashInitialSizeForFlv": 32,
              //   "controlBarVisibility": "hover",
              //   "useH5Prism": true
              // }, function (player) {
              //     console.log("The player is created");
              //   }
              // );
              
              var videoEl = document.getElementById('videoElement')
              var pArr = [109.60910111696789,18.309289035270666,28,109.60898627528759,18.309268212123328,28]
                  var instance =new Cesium.GeometryInstance({
                    geometry:new Cesium.WallGeometry({
                      positions:Cesium.Cartesian3.fromDegreesArrayHeights(pArr),
                      minimumHeights:[23,23],
                    })
                  });
                  var material = Cesium.Material.fromType("Image");
                  material.uniforms.image = videoEl;
                  if(_this.vidioFlag){
                    // flvPlayer.load()
                    // flvPlayer.play();


                    tileset = viewer.scene.primitives.add(new Cesium.Primitive({
                    id:'video',
                    geometryInstances:instance,
                    appearance: new Cesium.MaterialAppearance({
                      closed:false,
                      material:material,
                    }),
                    show:true,
                  }))
                  _this.vidioFlag = false
                  }else{
                    
                    flvPlayer.unload();


                    viewer.scene.primitives.remove(tileset)
                    _this.vidioFlag =true
                  }
                  
              console.log(viewer.scene.primitives)

              // viewer.scene.primitives.get(0).show = !viewer.scene.primitives.get(0).show
              // console.log(viewer.scene.primitives.get(0).show);
                
              
            break;
            case 'sxt1':
              viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(_this.mydata.camera[1].position[0],_this.mydata.camera[1].position[1],_this.mydata.camera[1].position[2]),
              orientation: {
                heading:  Cesium.Math.toRadians(_this.mydata.camera[1].heading), // 方向
                pitch: Cesium.Math.toRadians(_this.mydata.camera[1].pitch), // 倾斜角度
                roll: 0.0,
              },
              duration: 2, 
            })
            
            break;
            case 'sxt2':
              viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(_this.mydata.camera[2].position[0],_this.mydata.camera[2].position[1],_this.mydata.camera[2].position[2]),
              orientation: {
                heading:  Cesium.Math.toRadians(_this.mydata.camera[2].heading), // 方向
                pitch: Cesium.Math.toRadians(_this.mydata.camera[2].pitch), // 倾斜角度
                roll: 0.0,
              },
              duration: 2, 
            })
            break;
            case 'sxt3':
              var arr = ['炮楼_T2000经纬度_adjust@主要建筑','楼顶实体_T2000经纬度_adjust@主要建筑','楼梯间_T2000经纬度_adjust@主要建筑','T6层_T2000经纬度_adjust@主要建筑'
              ,'T5层_T2000经纬度_adjust@主要建筑','T4层_T2000经纬度_adjust@主要建筑','T3层_T2000经纬度_adjust@主要建筑']
              window.earth.forEach((res)=>{
                for(let i=0;i<arr.length;i++){
                  if(res.name ==arr[i]){
                    res.visible=false
                  }
                }
              })
              viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(_this.mydata.camera[3].position[0],_this.mydata.camera[3].position[1],_this.mydata.camera[3].position[2]),
              orientation: {
                heading:  Cesium.Math.toRadians(_this.mydata.camera[3].heading), // 方向
                pitch: Cesium.Math.toRadians(_this.mydata.camera[3].pitch), // 倾斜角度
                roll: 0.0,
              },
              duration: 2, 
            })
            break;
            case 'sxt4':
              var arr = ['炮楼_T2000经纬度_adjust@主要建筑','楼顶实体_T2000经纬度_adjust@主要建筑','楼梯间_T2000经纬度_adjust@主要建筑','T6层_T2000经纬度_adjust@主要建筑'
              ,'T5层_T2000经纬度_adjust@主要建筑','T4层_T2000经纬度_adjust@主要建筑','T3层_T2000经纬度_adjust@主要建筑']
              window.earth.forEach((res)=>{
                for(let i=0;i<arr.length;i++){
                  if(res.name ==arr[i]){
                    res.visible=false
                  }
                }
              })
              viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(_this.mydata.camera[4].position[0],_this.mydata.camera[4].position[1],_this.mydata.camera[4].position[2]),
              orientation: {
                heading:  Cesium.Math.toRadians(_this.mydata.camera[4].heading), // 方向
                pitch: Cesium.Math.toRadians(_this.mydata.camera[4].pitch), // 倾斜角度
                roll: 0.0,
              },
              duration: 2, 
            })
            break;
            case 'p0':
            viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(109.608332,18.309126477,63),
              orientation: {
                heading:  Cesium.Math.toRadians(115.0), // 方向
                pitch: Cesium.Math.toRadians(-40.0), // 倾斜角度
                roll: 0.0,
              },
              duration: 2, 
            })

            el.style.display='block'
            viewer.scene.postRender.addEventListener(function () {
              // 每一帧都去计算气泡的正确位置
              if (position) {
                var canvasHeight = scene.canvas.height
                var windowPosition = new Cesium.Cartesian2()
                Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position, windowPosition)
                el.style.bottom = canvasHeight - windowPosition.y + 45 + 'px'
                el.style.left = windowPosition.x - 70 + 'px'
                el.style.visibility = 'visible'
                el.innerHTML="总车位12<br>剩余10"
              }
            })

            break
            case 'p1':
            viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(109.60850757484252,18.30877136866485,30),
              orientation: {
                heading:  Cesium.Math.toRadians(90.0), // 方向
                pitch: Cesium.Math.toRadians(-30.0), // 倾斜角度
                roll: 0.0,
              },
              duration: 2, 
            })
            el.style.display='block'
            viewer.scene.postRender.addEventListener(function () {
              if (position) {
                var canvasHeight = scene.canvas.height
                var windowPosition = new Cesium.Cartesian2()
                Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position, windowPosition)
                el.style.bottom = canvasHeight - windowPosition.y + 45 + 'px'
                el.style.left = windowPosition.x - 70 + 'px'
                el.style.visibility = 'visible'
                el.innerHTML="总车位3<br>剩余0"
              }
            })
            break
            case 'p2':
            viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(109.6086578,18.30887043,30),
              orientation: {
                heading:  Cesium.Math.toRadians(90.0), // 方向
                pitch: Cesium.Math.toRadians(-30.0), // 倾斜角度
                roll: 0.0,
              },
              duration: 2, 
            })
            el.style.display='block'
            viewer.scene.postRender.addEventListener(function () {
              if (position) {
                var canvasHeight = scene.canvas.height
                var windowPosition = new Cesium.Cartesian2()
                Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position, windowPosition)
                el.style.bottom = canvasHeight - windowPosition.y + 45 + 'px'
                el.style.left = windowPosition.x - 70 + 'px'
                el.style.visibility = 'visible'
                el.innerHTML="总车位5<br>剩余4"
              }
            })
            break
            case 'p3':
            viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(109.608673,18.308418,30),
              orientation: {
                heading:  Cesium.Math.toRadians(90.0), // 方向
                pitch: Cesium.Math.toRadians(-30.0), // 倾斜角度
                roll: 0.0,
              },
              duration: 2, 
            })
            el.style.display='block'
            viewer.scene.postRender.addEventListener(function () {
              if (position) {
                var canvasHeight = scene.canvas.height
                var windowPosition = new Cesium.Cartesian2()
                Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position, windowPosition)
                el.style.bottom = canvasHeight - windowPosition.y + 45 + 'px'
                el.style.left = windowPosition.x - 70 + 'px'
                el.style.visibility = 'visible'
                el.innerHTML="总车位4<br>剩余4"
              }
            })
            break
            
        }
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    var _this = this
    //注册鼠标点击事件
    viewer.pickEvent.addEventListener(function(feature){    
      _this.createBubble(feature)
    });

    // handler.setInputAction(function(e){
    //   var position = scene.pickPosition(e.position)
    //   var cartographic = Cesium.Cartographic.fromCartesian(position)
    //   var longitude = Cesium.Math.toDegrees(cartographic.longitude)
    //   var latitude = Cesium.Math.toDegrees(cartographic.latitude)
    //   var height = cartographic.height 
      
    //   console.log(e.position)
    
      
    // },Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);


    //将坐标写入HTML
    function createDescription(Cesium, properties) {
      var simpleStyleIdentifiers = ['经度', '纬度', '高度']
      let html = ''
      for (var key in properties) {
        if (properties.hasOwnProperty(key)) {
          if (simpleStyleIdentifiers.indexOf(key) !== -1) {
            continue
          }
          var value = properties[key]
          if (Cesium.defined(value) && value !== '') {
            html += simpleStyleIdentifiers[key] + ':' + value + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
          }
        }
      }
      document.getElementById('windowbox').innerHTML = html
    }
    

    this.toStartFly = function () {
      var that = this
      if (this.copyIndex) {
        this.index = this.copyIndex
        this.copyIndex = undefined
        if (this.index < this.allStops.length) {
          scene.screenSpaceCameraController.enableRotate = false
          scene.screenSpaceCameraController.enableTranslate = false
          scene.screenSpaceCameraController.enableZoom = false
          scene.screenSpaceCameraController.enableTilt = false
          scene.screenSpaceCameraController.enableLook = false

          viewer.camera.setView({
            destination: new Cesium.Cartesian3.fromDegrees(
              this.drowallStops[this.index - 1].longitude,
              this.drowallStops[this.index - 1].latitude,
              this.drowallStops[this.index - 1].height
            ),
            orientation: {
              heading: this.allStops[this.index - 1].heading,
              pitch: this.allStops[this.index - 1].pitch,
              roll: this.allStops[this.index - 1].roll,
            },
          })
          fly()
          // l++
        }
      } else {
        this.index = 1
        if (this.index < this.allStops.length) {
          scene.screenSpaceCameraController.enableRotate = false
          scene.screenSpaceCameraController.enableTranslate = false
          scene.screenSpaceCameraController.enableZoom = false
          scene.screenSpaceCameraController.enableTilt = false
          scene.screenSpaceCameraController.enableLook = false

          viewer.camera.setView({
            destination: new Cesium.Cartesian3.fromDegrees(
              this.drowallStops[0].longitude,
              this.drowallStops[0].latitude,
              this.drowallStops[0].height
            ),
            orientation: {
              heading: this.allStops[0].heading,
              pitch: this.allStops[0].pitch,
              roll: this.allStops[0].roll,
            },
          })
          fly()
          // l++
        }
      }

      function fly() {
        if (that.index >= that.drowallStops.length) {
          scene.screenSpaceCameraController.enableRotate = true
          scene.screenSpaceCameraController.enableTranslate = true
          scene.screenSpaceCameraController.enableZoom = true
          scene.screenSpaceCameraController.enableTilt = true
          scene.screenSpaceCameraController.enableLook = true
        } else {
          let l = that.index
          viewer.camera.flyTo({
            destination: new Cesium.Cartesian3.fromDegrees(
              that.drowallStops[l].longitude,
              that.drowallStops[l].latitude,
              that.drowallStops[l].height
            ), // 设置位置
            orientation: {
              heading: that.allStops[l].heading, // 方向
              pitch: that.allStops[l].pitch, // 倾斜角度
              roll: that.allStops[l].roll,
            },
            duration: 5, // 设置飞行持续时间，默认会根据距离来计算
            complete: function () {
              fly()
              // 到达位置后执行的回调函数
            },
          })
          that.index++
        }
      }
    }
    

            // viewer.scene.camera.moveStart.addEventListener(function(){
            //   console.log(viewer.camera.position)
            //   // var position = viewer.camera.position
            //   // var arr = []
            //   // var cartographic = Cesium.Cartographic.fromCartesian(position)
            //   // arr.push(Cesium.Math.toDegrees(cartographic.longitude))
            //   // arr.push(Cesium.Math.toDegrees(cartographic.latitude))
            //   // _this.transPosition = arr
            // });

            viewer.scene.camera.changed.addEventListener(function(){
              console.log(`changed,${viewer.camera.heading}`)
              var position = viewer.camera.position
              var arr = []
              var cartographic = Cesium.Cartographic.fromCartesian(position)
              arr.push(Cesium.Math.toDegrees(cartographic.longitude))
              arr.push(Cesium.Math.toDegrees(cartographic.latitude))
              arr.push(viewer.camera.heading)
              
              _this.transPosition = arr
            })

  },
  created() {
    this.$root.$on('click', (val) => {
      if (this.isShow === val) {
        this.isShow = ''
      } else {
        this.isShow = val
      }
    })

  },
  watch: {
    isShow(n, o) {
      if (n != '2') {
        document.getElementById('viewer-panel').style.display = 'none'
      } else {
        document.getElementById('viewer-panel').style.display = 'block'
      }
      if(n=='7'||(n==''&&o=='7')){
        this.showCamera()
        window.earth.forEach((res)=>{
          res.visible=true
        })
      }
      if(n!='7'&& n!=''){
        for(let i=0;i<5;i++){
          viewer.entities.removeById('sxt'+i)
        }
        viewer.scene.primitives.remove(tileset)
        this.vidioFlag =true
      }
      if(n=='8'||(n==''&&o=='8')){
        this.addwall()
        
      }
      if(n!='8' && n!=''){
        document.getElementById('pbubble').style.display='none'
        for(let i=0;i<4;i++){
          viewer.entities.removeById('wall'+i)
          viewer.entities.removeById('p'+i)
        }
        
      }
    },
    checkedKeys(val, e) {},
  },
}
</script>

<style lang="less" scoped>
#eye {
    position: absolute;
    width: 20%;
    height: 20%;
    bottom: 20px;
    left: 0;
    z-index: 999;
    border: solid blue 1px;
    background: #333131;
}
#map3 {
  margin-left: 75px;
  position: fixed;
  width: 96.5%;
  height: 100%;
}
#alllayers {
  margin-left: 8px;
  margin-top: 8px;
  padding: 16px;
  height: 100%;
  border-radius: 5px;
  position: fixed;
  z-index: 999;
  background: white;
  opacity: 0.85;
}
.mywindow {
  padding: 0px 8px;
  line-height: 20px;
  width: 100%;
  position: fixed;
  z-index: 999;
  background: #212121;
  opacity: 0.8;
  bottom: 0;
}
.fly {
  position: fixed;
  z-index: 999;
  margin-top: 8px;
  margin-left: 8px;
  padding: 8px;
  background: #333131;
  border-radius: 5px;
  opacity: 0.8;
}
.button {
  border: 1px solid darkgray;
  background: rgb(0, 0, 0);
  margin: 8px;
  font-size: 14px;
  padding: 3px;
  border-radius: 3px;
  color: #fff;
}

#video{
  height: 200px;
  width: 200px;
  z-index: 999;
  position: absolute;
}

/*-------bubble------------------*/
.bubble {
  text-align: center;
  z-index: 999;
  text-align: center;
  position: fixed;
  padding: 15px;
  margin: 0;
  opacity: 0.8;
  background:#1f6666;
  // color: #212121;
  // max-width: 300px;
  max-height: 200px;
}

.bubble:after {
    content: "";
    position: absolute;
    // bottom: -50px;
    left: 45%;
    border-width: 0 20px 50px 0px;
    border-style: solid;
    border-color: transparent #1f6666;
    display: block;
    width: 0;
}
/* Border styles */
#tab {
    border:1px solid blanchedalmond;
    td{
      border: 1px solid blanchedalmond ;
      padding: 0 4px;
    }
}
/*-------bubble  end------------------*/
.myanchor{
  position: absolute;
  z-index: 999;
  top: 40%;
  right: 24px;
  color: #212121;
  line-height: 20px;
  padding: 8px 16px;
  text-align: center;
  background-color:rgba(240, 245, 245, 0.3);
  display: grid;
  a{
    color: #212121;
    margin: 10px 0px;
  }
  a:hover{
    color: rgb(3, 167, 243);
    // color: #212121;
  }
}

</style>